<template>
  <div class="ReadBook">
    <div class="book_title">
      <p>{{chapter.cName}}</p>
      <p style="text-align: right;"><van-icon name="revoke" size="10" @click="toHome" /></p>
    </div>
    <div class="book_content" v-html="chapter.cContent"></div>
    <div class="book_foot">
        <van-row>
            <van-col  span="8"><van-button @click="GetBegin" :loading="beginLoad" :disabled="this.begin==0" color="#CCBDA0" loading-text="加载中..." block>上一章</van-button></van-col>
            <van-col span="8"><van-button @click="GetCatalogue" color="#CCBDA0" :loading="catalogueLoad" loading-text="加载中..." block @>目录</van-button></van-col>
            <van-col span="8" ><van-button @click="GetEnd" :loading="endLoad" :disabled="this.end==-1" color="#CCBDA0" loading-text="加载中..." block>下一章</van-button></van-col>
        </van-row>
      
    </div>
    <van-popup v-model="catalogueLoad" position="left" :style="{ width: '80%',height:'100%' }">
      <van-search v-model="search" @input="GetCatalogue" placeholder="请输入搜索关键词" />
      <van-list
        v-model="catalogueLoad"
        :finished="finished"
        finished-text="没有更多了"
      >
        <van-cell @click="onCatalogue(item.cId)" v-for="item in chapters" :key="item.cId" :title="item.cName" />
      </van-list>
    </van-popup>
  </div>
</template>
<script>
import {getChapter,getFirst,getCatalogue1} from "@/api/index.js"
export default {
  name: "ReadBook",
  data() {
    return {
      begin:0,
      end:-1,
      beginLoad:false,
      endLoad:false,
      catalogueLoad:false,
      finished:true,
      chapter:{
        cId:0,
        bId:0,
        cName:'',
        cContent:'',
        updateTime:'',
        url:''
      },
      popupShow:false,
      chapters:[],
      search:''
    };
  },
  mounted() {
    this.chapter.bId=this.$route.query.bId;
    this.chapter.cId=this.$route.query.cId;
    if(this.chapter.cId==undefined||this.chapter.cId==null){
      this.GetFirst();
    }else{
      this.GetChapter();
    }
  },
  methods: {
    GetChapter(){
      getChapter({
        id:this.chapter.cId
      }).then((data) => {
        if (data.success) {
          this.chapter = data.response;
          this.begin = parseInt( data.msgDev.split('|')[0])
          this.end = parseInt(data.msgDev.split('|')[1])
          console.log(data.msgDev,this.begin,this.end);
          window.localStorage.setItem("cId"+this.chapter.bId,this.chapter.cId);
        }
      });
    },
    GetFirst(){
      getFirst({
        bId:this.chapter.bId
      }).then((data) => {
        if (data.success) {
          this.chapter = data.response;
          this.begin = parseInt( data.msgDev.split('|')[0])
          this.end = parseInt(data.msgDev.split('|')[1])
          window.localStorage.setItem("cId"+this.chapter.bId,this.chapter.cId)
        }
      });
    },
    GetBegin(){
      this.chapter.cId=this.begin;
      this.beginLoad=true;
      getChapter({
        id:this.chapter.cId
      }).then((data) => {
        this.beginLoad=false;
        if (data.success) {
          this.chapter = data.response;
          this.begin = parseInt( data.msgDev.split('|')[0])
          this.end = parseInt(data.msgDev.split('|')[1])
          console.log(data.msgDev,this.begin,this.end);
          window.localStorage.setItem("cId"+this.chapter.bId,this.chapter.cId)
        }
      });
    },
    GetEnd(){
      this.chapter.cId=this.end;
      this.endLoad=true;
      getChapter({
        id:this.chapter.cId
      }).then((data) => {
        this.endLoad=false;
        if (data.success) {
          this.chapter = data.response;
          this.begin = parseInt( data.msgDev.split('|')[0])
          this.end = parseInt(data.msgDev.split('|')[1])
          console.log(data.msgDev,this.begin,this.end);
          window.localStorage.setItem("cId"+this.chapter.bId,this.chapter.cId)
        }
      });
    },
    GetCatalogue(){
      this.catalogueLoad=true;
      getCatalogue1({
        page:1,
        bId:this.chapter.bId,
        cName:this.search,
        intPageSize:100000
      }).then((data) => {
        if (data.success) {
          this.chapters = data.response.data;
          
        }
      });
    },
    onCatalogue(cId){
      this.popupShow=false;
      this.catalogueLoad=true;
      getChapter({
        id:cId
      }).then((data) => {
        if (data.success) {
          this.catalogueLoad=false;
          this.chapter = data.response;
          this.begin = parseInt( data.msgDev.split('|')[0])
          this.end = parseInt(data.msgDev.split('|')[1])
          console.log(data.msgDev,this.begin,this.end);
          window.localStorage.setItem("cId"+this.chapter.bId,this.chapter.cId)
        }
      });
    },
    toHome(){
      this.$router.push({path:'/'});
    }
  },
};
</script>
<style lang="scss" scoped>
.ReadBook {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #CCBDA0;
  .book_title {
    position: fixed;
    z-index: 10;
    width: 100%;
    background: #CCBDA0;
    p {
      font-size: 12px;
      padding-left: 10px;
      margin: 0;
      line-height: 28px;
      height: 28px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      width: calc(50% - 20px);
      float: left;
    }
  }
  .book_content {
    height: calc(100% - 70px);
    padding: 0px;
    margin-top: 28px;
    position: fixed;
    background: #CCBDA0;
    /deep/ div {
      overflow: scroll;
      height: 100%;
      padding: 0 10px;
      background: #CCBDA0;
    }
  }
  .book_foot {
    position: fixed;
    bottom: 0px;
    z-index: 10;
    width: 100%;
    background: #CCBDA0;
    p {
      font-size: 14px;
      padding-left: 10px;
      margin: 0;
      line-height: 32px;
      height: 32px;
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
    }
  }
}
</style>